<template>
  <view
    class="grade-popup popup"
    catchtouchmove="true"
    :class="value && complete ? 'show' : 'none'"
    @touchmove.stop.prevent="moveHandle"
  >
    <view class="mask" @click="close('mask')"></view>
    <!-- 要购买的等级信息确认 start -->
    <view
      v-if="!isShowPay"
      class="layer attr-content"
      :style="'border-radius: 10rpx 10rpx 0 0;'"
    >
      <view class="specification-wrapper">
        <scroll-view class="specification-wrapper-content" scroll-y="true">
          <view class="specification-header">
            <view class="specification-name"
              ><text class="price" v-if="memberGrade.catchValue > 0"
                >￥{{ memberGrade.catchValue }}</text
              >购买{{ memberGrade.name }}</view
            >
          </view>
          <view class="specification-content">
            <view class="grade-item" v-if="memberGrade.discount > 0">
              <view class="item-rule"
                ><view class="title">买单折扣：</view
                >{{ memberGrade.discount }}折</view
              >
            </view>
            <view class="grade-item" v-if="memberGrade.speedPoint > 0">
              <view class="item-rule"
                ><view class="title">积分加速：</view
                >{{ memberGrade.speedPoint }}倍</view
              >
            </view>
            <view class="grade-item">
              <view class="item-rule">
                <view class="title">有效期限：</view>
                <text v-if="memberGrade.validDay > 0"
                  >{{ memberGrade.validDay }}天</text
                >
                <text v-else>永久</text>
              </view>
            </view>
            <view class="grade-description">
              <view class="item-rule">
                <view class="title">权益说明：</view>
                <view>{{
                  memberGrade.userPrivilege ? memberGrade.userPrivilege : "暂无"
                }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="close" @click="close('close')" v-if="showClose">
          <image class="close-item" :src="closeImage"></image>
        </view>
      </view>
      <view class="btn-wrapper">
        <view class="sure" @click="buyNow">立即购买</view>
      </view>
      <!-- 页面结束 -->
    </view>
    <!-- 要购买的等级信息确认 end -->

    <!-- 支付信息确认 start -->
    <view class="confirm" v-if="isShowPay">
      <view
        class="layer attr-content"
        :style="'border-radius: 10rpx 10rpx 0 0;'"
      >
        <view class="specification-wrapper">
          <scroll-view class="specification-wrapper-content" scroll-y="true">
            <view class="specification-header">
              <view class="specification-name">支付确认</view>
            </view>
            <view class="specification-content">
              <view v-if="couponInfo && couponInfo.amount" class="pay-item">
                <view class="item-point">
                  <view class="title" @click="doUseCoupon">
                    <text
                      v-if="useCoupon"
                      class="iconfont is-use icon-success"
                    ></text>
                    <text
                      v-if="!useCoupon"
                      class="iconfont icon-success"
                    ></text>
                    <text class="point-amount">使用卡券抵扣</text>
                    <text class="amount">￥{{ couponInfo.amount }}</text>
                  </view>
                </view>
              </view>
              <view class="pay-item">
                <view class="item-amount">
                  <view class="title">
                    实付金额：<text class="amount"
                      >￥{{
                        parseFloat(memberGrade.catchValue) -
                          parseFloat(useCouponInfo.amount) >=
                        0
                          ? parseFloat(memberGrade.catchValue) -
                            parseFloat(useCouponInfo.amount)
                          : (0.0).toFixed(2)
                      }}</text
                    >
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
          <view class="close" @click="close('close')" v-if="showClose">
            <image class="close-item" :src="closeImage"></image>
          </view>
        </view>
        <view class="btn-wrapper">
          <view class="sure" @click="doBuy">确认支付</view>
        </view>
        <!-- 页面结束 -->
      </view>
    </view>
    <!-- 支付信息确认 end -->
  </view>
</template>

<script>
import * as SettlementApi from "@/api/settlement";
import PayTypeEnum from "@/common/enum/order/PayType";
import { wxPayment } from "@/utils/app";

var that; // 当前页面对象
var vk; // 自定义函数集
export default {
  name: "GradePopup",
  props: {
    // true 组件显示 false 组件隐藏
    value: {
      Type: Boolean,
      default: false,
    },
    // vk云函数路由模式参数开始-----------------------------------------------------------
    // 等级信息
    memberGrade: {
      Type: Object,
      default: {},
    },
    // vk云函数路由模式参数结束-----------------------------------------------------------
    // 点击遮罩是否关闭组件 true 关闭 false 不关闭 默认true
    maskCloseAble: {
      Type: Boolean,
      default: true,
    },
    // 是否显示右上角关闭按钮
    showClose: {
      Type: Boolean,
      default: true,
    },
    // 关闭按钮的图片地址
    closeImage: {
      Type: String,
      default:
        "https://img.alicdn.com/imgextra/i1/121022687/O1CN01ImN0O11VigqwzpLiK_!!121022687.png",
    },
  },
  data() {
    return {
      complete: false, // 组件是否加载完成
      isShowPay: false, // true 显示 false 隐藏
      useCoupon: true, // 是否使用卡券
      useCouponInfo: { amount: 0, id: "" }, // 使用的卡券
      couponInfo: null, // 可用卡券
    };
  },
  mounted() {
    that = this;
  },
  methods: {
    async open() {
      that.complete = true;
      that.$emit("open", true);
      that.$emit("input", true);
    },
    // 监听 - 弹出层收起
    close(s) {
      if (s == "close") {
        that.$emit("input", false);
        that.$emit("close", "close");
        that.isShowPay = false;
        that.useCoupon = true;
      } else if (s == "mask") {
        if (that.maskCloseAble) {
          that.$emit("input", false);
          that.$emit("close", "mask");
        }
      }
    },
    moveHandle() {
      //禁止父元素滑动
    },
    // 立即购买
    buyNow() {
      this.prePay();
    },
    // 是否使用卡券
    doUseCoupon() {
      if (this.useCoupon) {
        this.useCoupon = false;
        this.useCouponInfo = { amount: 0, id: "" };
      } else {
        this.useCoupon = true;
        this.useCouponInfo = this.couponInfo;
      }
    },
    // 确认购买
    doBuy() {
      const app = this;
      let couponId = "";
      if (app.useCoupon) {
        couponId = app.couponInfo ? app.couponInfo.userCouponId : 0;
      }
      // 请求api
      SettlementApi.submit(
        app.memberGrade.id,
        "",
        "member",
        "",
        "",
        0,
        couponId,
        "",
        0,
        0,
        0,
        "",
        "JSAPI"
      )
        .then((result) => app.onSubmitCallback(result))
        .catch((err) => {
          if (err.result) {
            const errData = err.result.data;
            if (errData) {
              return false;
            }
          }
        });
    },
    // 支付前查询
    prePay() {
      const app = this;
      // 请求api
      SettlementApi.prePay({ type: "memberGrade" })
        .then((result) => {
          if (result.data) {
            if (result.data.canUseCouponInfo) {
              app.couponInfo = result.data.canUseCouponInfo;
              if (app.useCoupon) {
                app.useCouponInfo = app.couponInfo;
              }
            }
            app.isShowPay = true;
          }
        })
        .catch((err) => {
          if (err.result) {
            const errData = err.result.data;
            if (errData) {
              return false;
            }
          }
        });
    },
    // 订单提交成功后回调
    onSubmitCallback(result) {
      const app = this;
      // 微信支付
      if (result.data.payType == PayTypeEnum.WECHAT.value) {
        wxPayment(result.data.payment)
          .then(() => {
            uni.showModal({
              title: "支付结果",
              content: "支付成功",
              showCancel: false,
              success(o) {
                if (o.confirm) {
                  app.$router.go(0);
                  app.$emit("onPaySuccess");
                }
              },
            });
          })
          .catch((err) => app.$error("支付失败"))
          .finally(() => {
            //empty
          });
      }

      // 余额支付
      if (result.data.payType == PayTypeEnum.BALANCE.value) {
        app.$error("支付成功");
        app.$emit("onPaySuccess");
      }
    },
    // 弹窗
    toast(title, icon) {
      uni.showToast({
        title: title,
        icon: icon,
      });
    },
  },
  watch: {
    value: function (val) {
      if (val) {
        that.open();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.grade-popup {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 21;
  overflow: hidden;

  &.show {
    display: block;

    .mask {
      animation: showPopup 0.2s linear both;
    }

    .layer {
      animation: showLayer 0.2s linear both;
    }
  }

  &.hide {
    .mask {
      animation: hidePopup 0.2s linear both;
    }

    .layer {
      animation: hideLayer 0.2s linear both;
    }
  }

  &.none {
    display: none;
  }

  .mask {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.65);
  }

  .layer {
    display: flex;
    width: 100%;
    flex-direction: column;
    position: fixed;
    z-index: 99;
    bottom: 0;
    border-radius: 10rpx 10rpx 0 0;
    background-color: #fff;

    .specification-wrapper {
      width: 100%;
      padding: 30rpx 25rpx 10rpx 25rpx;
      box-sizing: border-box;
      background: #ffffff;

      .specification-wrapper-content {
        width: 100%;
        max-height: 1200rpx;
        min-height: 300rpx;

        &::-webkit-scrollbar {
          /*隐藏滚轮*/
          display: none;
        }

        .specification-header {
          width: 100%;
          display: flex;
          flex-direction: row;
          position: relative;
          margin-bottom: 40rpx;
          text-align: center;
          .specification-name {
            .price {
              color: #a41e14;
            }
            font-weight: bold;
            width: 100%;
            font-size: 30rpx;
            padding: 10rpx;
          }
        }

        .specification-content {
          font-weight: 500;
          font-size: 26rpx;
          .grade-item {
            .title {
              font-weight: bold;
              display: flex;
              float: left;
            }
            display: flex;
            height: 100rpx;
            padding-top: 30rpx;
            cursor: pointer;
            .item-rule {
              padding: 20rpx;
              border-bottom: solid 1px #cccccc;
              width: 100%;
              text-align: left;
            }
          }
          .grade-description {
            margin-top: 20rpx;
            padding: 20rpx;
            min-height: 100rpx;
            .title {
              font-weight: bold;
            }
          }
          .pay-item {
            padding: 30rpx;
            font-size: 30rpx;
            background: #fff;
            border: 1rpx solid $fuint-theme;
            border-radius: 8rpx;
            color: #888;
            margin-bottom: 12rpx;
            text-align: center;
            .amount {
              color: #a41e14;
              font-weight: bold;
            }
            .iconfont {
              margin-right: 10rpx;
            }
            .is-use {
              color: $fuint-theme;
            }
            .item-left_icon {
              margin-right: 20rpx;
              font-size: 48rpx;

              &.wechat {
                color: #00c800;
              }

              &.balance {
                color: $fuint-theme;
              }
            }
          }
        }
      }

      .close {
        position: absolute;
        top: 30rpx;
        right: 25rpx;
        width: 50rpx;
        height: 50rpx;
        text-align: center;
        line-height: 50rpx;

        .close-item {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }

    .btn-wrapper {
      display: flex;
      width: 100%;
      height: 120rpx;
      flex: 0 0 120rpx;
      align-items: center;
      justify-content: space-between;
      padding: 0 26rpx;
      box-sizing: border-box;
      margin-bottom: 120rpx;
      .layer-btn {
        width: 335rpx;
        height: 76rpx;
        border-radius: 38rpx;
        color: #fff;
        line-height: 76rpx;
        text-align: center;
        font-weight: 500;
        font-size: 28rpx;

        &.add-cart {
          background: #ffbe46;
        }

        &.buy {
          background: #fe560a;
        }
      }

      .sure {
        width: 698rpx;
        height: 80rpx;
        border-radius: 40rpx;
        color: #fff;
        line-height: 80rpx;
        text-align: center;
        font-weight: 500;
        font-size: 28rpx;
        background: linear-gradient(to right, #f9211c, #ff6335);
      }

      .sure.add-cart {
        background: $fuint-theme;
      }
    }
  }

  @keyframes showPopup {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes hidePopup {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes showLayer {
    0% {
      transform: translateY(120%);
    }

    100% {
      transform: translateY(0%);
    }
  }

  @keyframes hideLayer {
    0% {
      transform: translateY(0);
    }

    100% {
      transform: translateY(120%);
    }
  }
}
</style>
